<template>
    <div class="wrapper">
        <head-bar height="80" middleText="动态详情" style="position: absolute;top: 0;left: 0;" :leftClick="returnPage"></head-bar>
        <div class="webview-box">
            <web class="webview" :src="_webViewUrl"  @pagefinish="onPageFinish"></web>
        </div>
    </div>
</template>

<style>
    .webview{
        position: absolute;
        top: 0 ;
        left: 0;
        right:0;
        bottom: 0;
    }

    .webview-box {
        position: absolute;
        top: 114px ;
        left: 0;
        right:0;
        bottom: 0;
    }
    .wrapper{
        position: absolute;
        left: 0;
        right:0;
        bottom: 0;
        top:0;
    }

</style>

<script>
    import {WxcRichText, WxcSpecialRichText} from 'weex-ui';

    import headBar from '../components/headBar.vue'
    import nw from '../network/nw.js'
    import dtl from '../utils/dateUtils.js'

    const dom = weex.requireModule('dom')
    const navigator = weex.requireModule('navigator')


    var pref = weex.requireModule('pref')

    const url = {
        detail: '/app/yxq/article/',
        articleLike: '/app/yxq/article/like'
    }

    var param = navigator.param()


    export default {
        data: {
            articleLikeStat: false,//点赞的状态
            isLoad: false,//是否请求网络
            info: {},//文章信息
            webViewStyle: null,
//            webViewUrl:'http://192.168.1.115:8080/views/html5/yxq/article/speech_detail.html'
            webViewUrl:'http://192.168.0.45:8080/views/html5/yxq/article/speech_detail.html'
        },
        components: {headBar, WxcRichText, WxcSpecialRichText},
        computed: {
            _articleCheck: function () {
                return this.articleLikeStat ? 'root:img/article/like.png' : 'root:img/article/un-like.png'
            },
            _commentCheck: function () {
//                var val = pref.getString(`y_a_l_c_${param.id}`)
//                return val == true ? 'root:img/article/like.png':'root:img/article/un-like.png'
            },
            _formatCreateTime: function () {
                return dtl.formatDay(this.info.create_time)
            },
            _webStyle: function () {
                if (this.webViewStyle) {
                    return {height: 1213}
                }
                return {}
            },
            _webViewUrl:function () {
                return `${this.webViewUrl}?id=${param.id}&sid=${pref.getString('sid')}`
            }
        },
        methods: {
            //返回上个页面
            returnPage: function () {
                var nav = weex.requireModule('navigator')
                nav.back()
            },
            //文章点赞
            articleLike: function () {
                var self = this
                if (this.isLoad) {
                    return
                }
                this.isLoad = true
                var type = this.articleLikeStat ? 'cancel' : 'add'
                self.articleLikeStat = type == 'add' ? true : false
                nw.postDefine(url.articleLike, {
                    data: {articleId: param.id, type: type},
                    progress: false,
                    success(res) {
                        pref.setString(`y_a_l_${param.id}`, type == 'add' ? '1' : '0')
                        self.isLoad = false
                    }, exception() {
                        self.articleLikeStat = type == 'add' ? false : true
                    }, fail() {
                        self.articleLikeStat = type == 'add' ? false : true
                    }
                })

            },

            onPageFinish: function (e) {
                var self = this
//                console.info(JSON.stringify(e.currentTarget))
//                console.info(1211)
//                var modal = weex.requireModule('modal')
//                modal.alert({message:e})

                dom.getComponentRect(this.$refs.webview, option => {
                    console.info(option.size)
                    self.webViewStyle = option.size
                })

            }
        },
        mounted() {
        }
    }
</script>

